<template>
  <div class="mine">
    <div class="userinfo u-flex">
      <div class="img">
        <van-image round width="128rem" height="128rem" :src="avatarBig" />
      </div>

      <div class="info">
        <div class="phone">{{ info.username }}</div>
        <div class="tips">Hi，欢迎来到众帮联盟~</div>
      </div>
    </div>

    <div class="card level-box u-flex">
      <div class="level" @click="fd">
        <div class="leve-icon u-flex">
          <span>{{ info.issue_level_name }}</span>
        </div>

        <div class="text-box">
          <span>发单等级</span>
          <span>Lv.{{ info.issue_level }}</span>
          <van-image
            width="28rem"
            height="28rem"
            :src="require('@/assets/images/mine/icon_next@2x.png')"
          />
        </div>
      </div>

      <div class="level" @click="jd">
        <div class="leve-icon u-flex">
          <span>{{ info.accept_level_name }}</span>
        </div>

        <div class="text-box">
          <span>接单等级</span>
          <span>Lv.{{ info.accept_level }}</span>
          <van-image
            width="28rem"
            height="28rem"
            :src="require('@/assets/images/mine/icon_next@2x.png')"
          />
        </div>
      </div>
    </div>

    <div class="card nav-box">
      <div class="nav u-flex-bet" @click="go(1)">
        <div class="icon-box u-flex">
          <van-image
            width="44rem"
            height="44rem"
            :src="require('@/assets/images/mine/icon_1@2x.png')"
          />
          <div class="name">我的发布</div>
        </div>
        <van-image
          width="28rem"
          height="28rem"
          :src="require('@/assets/images/mine/icon_next@2x.png')"
        />
      </div>

      <div class="nav u-flex-bet" @click="go(2)">
        <div class="icon-box u-flex">
          <van-image
            width="44rem"
            height="44rem"
            :src="require('@/assets/images/mine/icon_2@2x.png')"
          />
          <div class="name">我的接单</div>
        </div>
        <van-image
          width="28rem"
          height="28rem"
          :src="require('@/assets/images/mine/icon_next@2x.png')"
        />
      </div>

      <div class="nav u-flex-bet" @click="go(3)">
        <div class="icon-box u-flex">
          <van-image
            width="44rem"
            height="44rem"
            :src="require('@/assets/images/mine/icon_3@2x.png')"
          />
          <div class="name">常见问题</div>
        </div>
        <van-image
          width="28rem"
          height="28rem"
          :src="require('@/assets/images/mine/icon_next@2x.png')"
        />
      </div>

      <div class="nav u-flex-bet" @click="go(4)">
        <div class="icon-box u-flex">
          <van-image
            width="44rem"
            height="44rem"
            :src="require('@/assets/images/mine/icon_4@2x.png')"
          />
          <div class="name">关于</div>
        </div>
        <van-image
          width="28rem"
          height="28rem"
          :src="require('@/assets/images/mine/icon_next@2x.png')"
        />
      </div>
    </div>

    <div class="btn-box u-flex-center" @click="out">
      <div class="btn">退出</div>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import header from "@/components/header/header.vue";
import { Field } from "vant";
import { Button, Toast, Image as VanImage, Cell, CellGroup } from "vant";
import { API_PATH } from "@/api/index.js";
import { PERSON, UER_OUT } from "@/api/api.js";
// import { Field } from 'vant';
Vue.use(Field);
Vue.use(VanImage);
Vue.use(Cell);
Vue.use(CellGroup);
export default {
  name: "mine",
  components: {
    [header.name]: header,
    [Button.name]: Button,
  },
  data() {
    return {
      info: "",
      avatarBig: require("@/assets/images/bigLogo.png"),
    };
  },
  mounted() {
    this.getInfo();
  },
  methods: {
    go(type) {
      if (type == 1) {
        this.$router.push({ name: "publishList" });
      } else if (type == 2) {
        this.$router.push({ name: "orderList" });
      } else if (type == 3) {
        this.$router.push({ name: "article", query: { id: 9 } });
      } else if (type == 4) {
        this.$router.push({ name: "article", query: { id: 10 } });
      }
    },
    async getInfo() {
      const { data } = await this.$reqGet(PERSON, {});
      console.log(data);
      if (data.status == 1) {
        let info = data.data;
        this.info = info;
      }
    },
    async out() {
      const { data } = await this.$reqPost(UER_OUT, {});
      if (data.status == 1) {
        let that = this;
        Toast.success({
          message: "已退出!",
          onClose: function() {
            that.$router.push({ name: "login" });
          },
        });
      }
    },
    fd() {
      this.$router.push(
        "/fdCharge?level=" +
          this.info.issue_level +
          "&name=" +
          this.info.issue_level_name
      );
    },
    jd() {
      this.$router.push(
        "/jdCharge?level=" +
          this.info.accept_level +
          "&name=" +
          this.info.accept_level_name
      );
    },
  },
};
</script>

<style lang="scss" scoped>
.mine {
  min-height: 100vh;
  background-size: contain;
  background-repeat: no-repeat;
  background-position: 0 -88rem;
  background-image: url("../../assets/images/mine/bgphoto@2x.png");

  .userinfo {
    padding-top: 136rem;
    padding-left: 64rem;
    margin-bottom: 40rem;

    .img {
      border: 4rem solid #fff;
      border-radius: 50%;
      overflow: hidden;
      width: 128rem;
      height: 128rem;
    }

    .info {
      color: #fff;
      margin-left: 24rem;

      .phone {
        font-size: 36rem;
        margin-bottom: 10rem;
        font-weight: bold;
      }

      .tips {
        font-size: 24rem;
      }
    }
  }

  .card {
    border-radius: 20rem;
    background-color: #fff;
    margin: 0 24rem;
    text-align: left;
  }

  .level-box {
    padding: 36rem 0 42rem;

    .level {
      flex: 1;
      padding-left: 40rem;

      &:nth-child(1) {
        border-right: 2rem solid #eaeaea;
        .leve-icon {
          background-image: url("../../assets/images/mine/icon_yslx@2x.png");
        }
      }

      .leve-icon {
        width: 152rem;
        height: 48rem;
        background-image: url("../../assets/images/mine/icon_sgb@2x.png");
        background-size: contain;

        span {
          display: inline-block;
          width: 100%;
          margin-left: 28rem;
          color: #fff;
          font-size: 20rem;
          text-align: center;
          transform: scale(0.8);
        }
      }

      .text-box {
        margin-top: 14rem;
        position: relative;
        span {
          &:nth-child(1) {
            font-size: 28rem;
            color: #66696e;
            margin-right: 16rem;
          }

          &:nth-child(2) {
            font-size: 32rem;
            font-weight: bold;
          }
        }

        .van-image {
          position: absolute;
          right: 40rem;
          bottom: 6rem;
        }
      }
    }

    .line {
      width: 2rem;
      height: 98rem;
      background-color: #eaeaea;
    }
  }

  .nav-box {
    margin-top: 40rem;

    .nav {
      padding: 24rem;
      border-bottom: 2rem solid #f8f8f8;
      .icon-box {
        .name {
          font-size: 32rem;
          font-weight: bold;
          margin-left: 16rem;
        }
      }
    }
  }

  .btn-box {
    margin: 140rem 24rem 0;
    height: 88rem;
    font-size: 32rem;
    font-weight: bold;
    color: #fff;
    border-radius: 44rem;
    background: linear-gradient(145deg, #2cb1ff 0%, #2f81fe 100%);
  }
}
</style>
